<template>
    <div class="pay-list">
        <div class="mui-card" v-for="order in orderlist" :key="order.id">
            <div class="mui-card-header">
                <span class="title">{{ order.create_time }}</span>
                <span>
                    <span v-if="order.is_pay">已支付</span><span v-else>未支付</span> |
                    <span v-if="order.is_cancel">已取消</span>
                    <span v-else @click="cancel(order.id)">取消订单</span>
                </span>
            </div>
            <div class="mui-card-content" @click="show(order.id)">
                <div class="mui-card-content-inner">
                    <div class="cover" v-for="item in order.user_order_goods" :key="item.id">
                        <div class="img-con">
                            <img :src="item.goods_goods.image">
                        </div>
                        <div class="img-tag">x{{ item.count }}</div>
                    </div>
                </div>
            </div>
            <p>实付金额：<span>¥{{ order.price }}</span></p>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            orderlist: [] // 订单列表
        }
    },
    created () {
        this.getOrderList() // 组件创建时获取订单列表
    },
    methods: {
        // 获取订单列表
        getOrderList () {
            this.$indicator.open({
                text: '加载中'
            })
            this.$http.get('order/list').then(res => {
                this.$indicator.close()
                if (res.data.code === 0) {
                    this.$toast(res.data.msg) // 显示错误提示
                } else if (res.data.code === 1) {
                    if (res.data.data.length) {
                        this.orderlist = res.data.data // 保存订单列表
                    } else {
                        this.$toast('订单为空') // 显示订单为空提示
                    }
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' }) // 未登录时跳转到登录页
                }
            }).catch(error => {
                this.$indicator.close()
                this.$toast('订单加载失败，请重试') // 显示错误提示
                window.console.error('订单加载失败:', error) // 打印错误信息
            })
        },
        // 跳转到订单详情页面
        show (id) {
            this.$router.push({ name: 'order_show', params: { id: id } });
        },
        cancel (id) {
            this.$indicator.open({
                text: '取消中'
            })
            this.$http.post('order/cancel', { id: id }).then(res => {
                this.$indicator.close()
                if (res.data.code === 0) {
                    this.$toast(res.data.msg)
                } else if (res.data.code === 1) {
                    this.getOrderList()
                } else if (res.data.code === 2) {
                    this.$router.push({ name: 'login' })
                }
                window.console.log(res.data)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.pay-list {
    p {
        padding: 0 10px;
        text-align: right;

        span {
            color: #151515;
        }
    }

    .mui-card-header {
        color: #999;
        font-size: 13px;

        span.title {
            font-size: 13px;
            color: #888;
        }
    }

    .mui-card-content-inner {
        .cover {
            position: relative;
            width: 70px;
            height: 70px;
            display: inline-block;
            margin-right: 10px;

            .img-con {
                width: 100%;
                height: 100%;
                margin-right: 10px;
                border-radius: 2px;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 2px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate3d(-50%, -50%, 0);
                }
            }

            .img-tag {
                position: absolute;
                opacity: 0.5;
                background: #000;
                color: #fff;
                text-align: center;
                font-size: 12px;
                right: 0;
                bottom: 0;
                padding: 0 5px;
                border-radius: 2px 0;
            }
        }
    }
}
</style>